<template>
	<view class="area-box">
		<!-- <view class="pop-close">
			<img @click="close"
				src="https://file.casugn.com/storecompcard//LFV8AKwdezzK28960a4e24ed28992012ca1560122c19_1660814072013.png"
				alt="">
		</view> -->
		<view class="area-wrap" v-for="(item,index) in areaList" :key="index">
			<view class="area-name">
				{{item.areaName}}
			</view>
			<view class="city-name-box">
				<view :class="activeNum==i&&obj.isSelect==true?'city-name-active':'city-name'" v-for="(obj,i) in item.cityLists" @click="cityNameClick(obj,i)" :key="i">
					{{obj.name}}
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"supplyArea",
		data() {
			return {
				areaList:[
					{
						areaName:"华北地区",
						cityLists:[
							{
								isSelect:false,
								name:'北京'
							},
							{
								isSelect:false,
								name:'河北'
							},
							{
								isSelect:false,
								name:'内蒙古'
							},
							{
								isSelect:false,
								name:'山西'
							},
							{
								isSelect:false,
								name:'天津'
							},
							]
					},
					{
						areaName:"华南地区",
						cityLists:[
							{
								isSelect:false,
								name:'广东'
							},
							{
								isSelect:false,
								name:'广西'
							},
							{
								isSelect:false,
								name:'海南'
							},
						]
					},
					{
						areaName:"华东地区",
						cityLists:[
							{
								isSelect:false,
								name:'安徽'
							},
							{
								isSelect:false,
								name:'福建'
							},
							{
								isSelect:false,
								name:'江苏'
							},
							{
								isSelect:false,
								name:'山东'
							},
							{
								isSelect:false,
								name:'上海'
							},
							{
								isSelect:false,
								name:'浙江'
							},	
						]
					},
					{
						areaName:"华中地区",
						cityLists:[
							{
								isSelect:false,
								name:'河南'
							},
							{
								isSelect:false,
								name:'湖北'
							},
							{
								isSelect:false,
								name:'湖南'
							},
							{
								isSelect:false,
								name:'江西'
							},
						]
					},
					{
						areaName:"西北地区",
						cityLists:[
							{
								isSelect:false,
								name:'甘肃'
							},
							{
								isSelect:false,
								name:'宁夏'
							},
							{
								isSelect:false,
								name:'青海'
							},
							{
								isSelect:false,
								name:'陕西'
							},
							{
								isSelect:false,
								name:'新疆'
							},
						]
					},
					{
						areaName:"西南地区",
						cityLists:[
							{
								isSelect:false,
								name:'贵州'
							},
							{
								isSelect:false,
								name:'四川'
							},
							{
								isSelect:false,
								name:'西藏'
							},
							{
								isSelect:false,
								name:'云南'
							},
							{
								isSelect:false,
								name:'重庆'
							},
						]
					},
					{
						areaName:"东北地区",
						cityLists:[
							{
								isSelect:false,
								name:'黑龙江'
							},
							{
								isSelect:false,
								name:'吉林'
							},
							{
								isSelect:false,
								name:'辽宁'
							},
						]
					},
					{
						areaName:"港澳台地区",
						cityLists:[
							{
								isSelect:false,
								name:'香港'
							},
							{
								isSelect:false,
								name:'澳门'
							},
							{
								isSelect:false,
								name:'台湾'
							},
						]
					}
				],
				isActive:false,
				activeNum:"-1"
			};
		},
		methods:{
			cityNameClick(item,index){
				console.log(item,index)
				this.activeNum=index
				this.areaList.forEach(ele=>{
					let a=ele.cityLists.find(obj=>{
						return obj.name==item.name
					})
					ele.cityLists.map(obj=>{
						obj.isSelect=false
					})
					console.log("测试下",a)
					if(a){
						if(a.name==item.name){
							a.isSelect=true
							this.$emit("areaSelectName",a.name)
							console.log(a.isSelect)
							// uni.navigateTo({
							// 	url: '/pagesBusiness/supply/supply?name='+a.name
							// })
						}
					}
					
				})
			},
			close(){
				
			},
		}
	}
</script>

<style lang="less">
	.area-box{
		.pop-close {
			text-align: right;
			img{
				margin-right: 40upx;
				width: 80upx;
				height: 80upx;
			}
			
		}
		.area-wrap{
			display: flex;
			border-bottom: 1px solid #f4f4f4;
			padding: 40upx 20upx;
			// justify-content: spa;
			.area-name{
				// margin-right: 40upx;
				width: 170upx;
				text-align: center;
			}
			.city-name-box{
				margin-left: 40upx;
				display: flex;
				width: 500upx;
				// background: red;
				flex-wrap: wrap;
				.city-name{
					width: 100upx;
					padding: 15upx;
					background: #f5f5f5;
					border-radius: 5upx;
					margin: 10upx;
					text-align: center;
				}
				.city-name-active{
					width: 100upx;
					padding: 15upx;
					background: #2979ff;
					border-radius: 5upx;
					margin: 10upx;
					text-align: center;
					color: white;
					// background: red;
				}
			}
		}
	}
</style>